<template>
  <div>
    <!-- 新闻标题头部 -->
    <div class="goods-header">
      <span class="iconfont" @click="$router.go(-1)">&#xe716;</span>
      <div class="goods-search">
        <span class="iconfont">&#xe699;</span>
        <input type="text" placeholder="商品/店铺名称">
      </div>
      <span class="iconfont">&#xe710;</span>
    </div>
    <div class="goods-box">
      <div class="goods-bannerbox"></div>
      <div class="goods-bannerbox2">
        <div class="goods-bannerbox3"></div>
      </div>
      <mt-swipe :show-indicators="false" :auto="0" class="goods-banner">
        <mt-swipe-item>
          <img src="./goods-banner1.png">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="./goods-banner2.png">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="./goods-banner3.png">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="./goods-banner4.png">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="./goods-banner5.png">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="./goods-banner6.png">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- navbar -->
    <div class="navbar">
      <ul>
        <li>
          <dl>
            <dt>
              <a href="javascript:;">
                <img src="../../img/goods3.png">
              </a>
            </dt>
            <dd>签到</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>
              <a href="javascript:;">
                <img src="../../img/goods2.png">
              </a>
            </dt>
            <dd>优惠劵</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>
              <a href="javascript:;">
                <img src="../../img/goods4.png">
              </a>
            </dt>
            <dd>9.9包邮</dd>
          </dl>
        </li>
        <li tag="li">
          <dl>
            <dt>
              <a href="javascript:;">
                <img src="../../img/goods1.png">
              </a>
            </dt>
            <dd>淘返利</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>
              <a href="javascript:;">
                <img src="../../img/goods5.png">
              </a>
            </dt>
            <dd>分类</dd>
          </dl>
        </li>
      </ul>
    </div>
    <!-- 限时秒杀 -->
    <div class="miaoshabox">
      <div class="miaosha">
        <div class="miaosha-title">
          <div class="miaosha-title-left">
            <h1>限时秒杀</h1>
            <ul>
              <li>{{hour}}</li>
              <li>:</li>
              <li>{{ minute }}</li>
              <li>:</li>
              <li>{{ second }}</li>
            </ul>
          </div>
          <div class="miaosha-title-right">
            <a>更多秒杀</a>
            <span class="iconfont">&#xe665;</span>
          </div>
        </div>
        <div class="miaosha-body">
          <ul>
            <li>
              <div class="miaosha-body-img">
                <img src="../../img/miaosha1.png" alt>
              </div>
              <dl>
                <dt>Bear/小熊ZDQ-A14E6煮蛋器双层预约定时蒸蛋多功能不锈钢煎蛋器</dt>
                <dd>
                  ￥268
                  <del>695</del>
                </dd>
              </dl>
            </li>
            <li>
              <div class="miaosha-body-img">
                <img src="../../img/miaosha2.png" alt>
              </div>
              <dl>
                <dt>祈和KS-550电动打蛋器 家用搅拌器 手持打奶油打蛋机 商用大功率</dt>
                <dd>
                  ￥298
                  <del>358</del>
                </dd>
              </dl>
            </li>
            <li>
              <div class="miaosha-body-img">
                <img src="../../img/miaosha3.png" alt>
              </div>
              <dl>
                <dt>飞科电动剃须刀男士刮胡刀全身水洗智能充电式胡须刀正品刮胡子刀</dt>
                <dd>
                  ￥695
                  <del>665</del>
                </dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 销售精选 -->
    <div class="jianxuanbox">
      <div class="jianxuan">
        <div class="miaosha-title">
          <div class="miaosha-title-left">
            <h1>精选商品</h1>
          </div>
          <div class="miaosha-title-right">
            <a>更多精选</a>
            <span class="iconfont">&#xe665;</span>
          </div>
        </div>
        <ul>
          <li>
            <img src="../../img/goods-jinxuan.png" alt>
          </li>
        </ul>
      </div>
    </div>

    <!-- 更多使用 -->
    <div class="jianxuanbox">
      <div class="jianxuan">
        <div class="miaosha-title">
          <div class="miaosha-title-left">
            <h1>0元试用</h1>
          </div>
          <div class="miaosha-title-right">
            <a>更多试用</a>
            <span class="iconfont">&#xe665;</span>
          </div>
        </div>
        <div class="shiyonglist">
          <div class="shiyongimg">
            <img src="../../img/shiyong1.png">
          </div>
          <ul>
            <li>Nike 耐克官方NIKE AIR FORCE 1 '07男子运动休闲鞋AT4143 315122</li>
            <li>
              <a>
                数量：
                <span>20</span>
              </a>
              <a>
                市场价：
                <span>499</span>
              </a>
            </li>
            <li>
              <span>立即申请</span>
            </li>
          </ul>
        </div>
        <div class="shiyonglist">
          <div class="shiyongimg">
            <img src="../../img/shiyong2.png">
          </div>
          <ul>
            <li>Apple/苹果 AirPods原装无线蓝牙耳机手机平板电脑运动入耳式耳麦</li>
            <li>
              <a>
                数量：
                <span>20</span>
              </a>
              <a>
                市场价：
                <span>499</span>
              </a>
            </li>
            <li>
              <span>立即申请</span>
            </li>
          </ul>
        </div>
        <div class="shiyonglist">
          <div class="shiyongimg">
            <img src="../../img/shiyong3.png">
          </div>
          <ul>
            <li>苏泊尔电饭煲家用3L迷你电饭锅小型智能5官方旗舰店6正品1-2人3-4</li>
            <li>
              <a>
                数量：
                <span>20</span>
              </a>
              <a>
                市场价：
                <span>499</span>
              </a>
            </li>
            <li>
              <span>立即申请</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="cainixihuanbox">
      <div class="cainixihuan">
        <div class="title">
          <span>
            <img src="../../img/icon-xiushi.png" alt>
          </span>
          <h2>猜你喜欢</h2>
          <span>
            <img src="../../img/icon-xiushi.png" alt>
          </span>
        </div>
        <keep-alive>
            <goodList></goodList>
        </keep-alive>
      
      </div>
    </div>
  </div>
</template>
<script>
import goodList from "./goodslist";

export default {
  data() {
    return {
      day: "00",
      hour: "00",
      minute: "00",
      second: "00"
    };
  },
  methods: {
    getGoods: function(params) {
      this.axios
        .get(
          "/goods/getGoodInfo?appkey=0df6290cb148cace89f7df5064fc105e&id=552509860056"
        )
        .then(response => {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    countDown: function(times) {
      var timer = null;
      timer = setInterval(() => {
        var day = 0,
          hour = 0,
          minute = 0,
          second = 0; //时间默认值
        if (times > 0) {
          day = Math.floor(times / (60 * 60 * 24));
          hour = Math.floor(times / (60 * 60)) - day * 24;
          minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60;
          second =
            Math.floor(times) -
            day * 24 * 60 * 60 -
            hour * 60 * 60 -
            minute * 60;
        }
        if (day <= 9) {
          day = "0" + day;
        }
        if (hour <= 9) {
         hour = "0" + hour;
        }
        if (minute <= 9) {
           minute = "0" + minute;
        }
        if (second <= 9) {
       second = "0" + second;
        
        }
         this.day = day
         this.hour = hour
         this.minute = minute
         this.second = second
        times--;
      }, 20);
      if (times <= 0) {
        clearInterval(timer);
      }
    }
  },
  mounted() {
    // this.getGoods();
    this.countDown(51584);
  },
  components: {
    goodList
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
